var padding = 10;
var coord = { x: 0, y: 0};
var root = { x: 10, y: 10};

(function($, window, document){
	$.extend($.fn, {
		pageMenu : {
			container: null,
			left: 0,
			top: 0,
			lineComp : 5,
			
			create : function(container, options, left, lineComp, top){
				this.container = container;
				
				if(left){
					this.left = left;
				}
				
				if(top){
					this.top = top;
				}
				
				
				if(lineComp){
					this.lineComp = lineComp;
				}
				
				for ( var option in options) {
					var _option = $("<div />");
					_option.addClass("button");
					_option.attr("source", options[option].source);
					_option.bind("callback", options[option].callback);
					_option.html(options[option].label);
					_option.appendTo(container);
				}
				
				this.origin();
				
				$(".button").click(function(event) {
					var _selected = $(this);
					
					if ($(this).hasClass("selected")) {
						return;
					}
					
					if($(this).html() == "Página<br>Principal<br>"){
						var url = "/dotcao/index.html";    
						$(location).attr('href', url);
						return;
					}

					$(this).addClass("selected");
					$(this).css("z-index", "199");

					$(this).animate({
						left : root.x,
						top : root.y
					}, 1000, function() {
						var len = $(".button").length;
						$(".button").each(function(index) {
							
							if (!$(this).hasClass("selected")) {
								$(this).css("z-index", "99");
							}
							
							if (index == (len - 1)) {
								$(this).animate({left : root.x, top : root.y }, 1000, function() {
									var innerContent = $("<div />", {
										id : "pagina"
									});
									
									innerContent.addClass("innerContent");
									innerContent.css("z-index", "198");
									innerContent.css("left", ($(this).css("left")+10));
									innerContent.css("top", ($(this).css("top")-10));
									innerContent.css("display", "none");
									innerContent.appendTo($().pageMenu.container);
									
									var source = $(_selected).attr("source");
									
									if(source){
										innerContent.load(source + " .form-content", function(){
											$(_selected).trigger('callback');											
											innerContent.fadeIn("slow");
										});
									}
									else{
										innerContent.fadeIn("slow");
									}
									
								});
							} else {
								$(this).animate({
									left : root.x,
									top : root.y
								}, 1000);
							}
						});

						$("<button />", { id : "back" }).html("Voltar").appendTo($(this));
						$("#back").click(function(event) {
							event.stopPropagation();

							$("#pagina").fadeOut("slow", function() {
								$("#back").fadeOut("slow", function() {
									$("#back").remove();
								});

								$().pageMenu.restore();

								$("#pagina").remove();
							});

							$(".button").removeClass("selected");
						});
					});
				});

				this.restore();
				
				return this;
			},
			
			origin: function(){
				var height = $(document).height();
				var width = $(document).width();

				var margin = Math.ceil((width - 960) / 2);

				coord.x = margin + padding + this.left;
				coord.y = 90 + padding + this.top;
			},
			
			restore: function(){		
				var MAX_COLUNA = this.lineComp;
				var contLinha = 0;
				var contColuna = -1;

				var len = $(".button").length;
				
				$(".button").each(function(index) {
					contColuna++;

					if (contColuna == MAX_COLUNA) {
						contLinha++;
						contColuna = 0;
					}

					var left = coord.x + (contColuna * 16) + (contColuna * 170);
					var top = coord.y + (contLinha * 16) + (contLinha * 170);

					if (index == 0) {
						root.x = left;
						root.y = top;
					}
					
					if(index == (len-1)){
						var h = coord.y + (contLinha * 16) + (contLinha * 170) + 70;
						$("#menu").css("min-height", h);
					}

					$(this).animate({
						top : top,
						left : left
					}, 1000);
				});
				
				return this;
			}
		}
	});
})(jQuery, window, document);



